<script setup lang="ts">
import { editInstance, getInstanceList, removeInstance } from '@/api/docker';
import type { Instance } from '@/api/docker/type';
import { onMounted, ref } from 'vue';
import InstanceEdit from '../components/InstanceEdit.vue';

const instanceList = ref([] as Instance[]);
const showEdit = ref(false);
const instance = ref({} as Instance);

onMounted(() => {
    refresh();
})

const refresh = () => {
    getInstanceList().then((res) => {
        instanceList.value = res.data as Instance[];
    })
}

const openEdit = (item: Instance) => {
    instance.value = item;
    showEdit.value = true;
}

const openRemove = (item: Instance) => {
    removeInstance(item.id).then((res) => {
        refresh();
    })
}

</script>

<template>
    <div>
        <el-table :data="instanceList" style="width: 100%" stripe border>
            <el-table-column prop="id" label="实例ID" />
            <el-table-column prop="name" label="实例Name" />
            <el-table-column prop="ip" label="实例IP" />
            <el-table-column label="实例状态" >
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <el-tag v-if="scope.row.status === 'Online'" type="success">在线</el-tag>
                        <el-tag v-else-if="scope.row.status === 'Offline'" type="info">离线</el-tag>
                        <el-tag v-else-if="scope.row.status === 'Normal'" type="warning">创建</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="内存使用情况" >
                <template #default="scope">
                    <div>
                        <el-progress :percentage="scope.row.memoryUsage" striped-flow :stroke-width="15" striped />
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="created" label="创建时间" />
            <el-table-column prop="updated" label="更新时间" />
            <el-table-column fixed="right" label="操作" min-width="100">
                <template #default="scope: {row: Instance}">
                    <el-button link type="primary" @click="openEdit(scope.row)">修改</el-button>
                    <el-button link type="primary" @click="openRemove(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <InstanceEdit v-if="showEdit" v-model:instance="instance" v-model:show="showEdit"></InstanceEdit>
    </div>
</template>

<style lang="scss" scoped>

</style>